// 图表容器
import React from 'react';
import { connect } from 'react-redux';
import BdhButton from 'src/pages/Components/BdhButton';
import ChartsTypeMap from 'src/pages/AnalyseManage/Components/ChartsType';
import styles from './index.module.scss';
import { Tooltip, Popconfirm, message } from 'antd';
import { CheckOutlined } from '@ant-design/icons';
import DetailModal from '../../EditReport/components/ChartHeader/DetailModal';
import ChartsBase from '../../EditReport/components/ChartsBase';

interface IProps {
	chartsList: Array<any>;
	handleDelete: Function;
	handleAddToPanel: Function;
	btnAuth: any;
}

class Charts extends React.PureComponent<IProps> {
	state: any = {

		// 详细信息模态框
		detailModalVisable: false,
		currentConfig: {
			content: {}
		},
	};

	handleDeleteClick = async ( item: any ) => {
		this.props.handleDelete( item );
	};

	handleViewClick = ( config: any ) => {
		const { type } = config.content;
		if ( type === 'Gauge' || type === 'Bullet' || type === 'Quota' || type === 'Liquid' ) {
			message.warning( '此类图形暂无详情' );
			return;
		}
		this.setState( {
			currentConfig: config,
			detailModalVisable: true
		} );
	};

	handleAddClick = ( config ) => {
		this.props.handleAddToPanel( true, [ config.content ] );
	};

	toggleDetailModalVisable = () => {
		const detailModalVisable = !this.state.detailModalVisable;
		this.setState( { detailModalVisable: detailModalVisable } );
	};

	addOk = ( id ) => {};

	render() {
		const btnAuth = this.props.btnAuth;
		return (
			<>
				{this.props.chartsList &&
					this.props.chartsList.map( ( item, index ) => {
						return (
							<div className={styles.chart_item} key={index}>
								<div className={styles.chart_item_comp}>
									<div className={styles.chart_item_title}>
										{( item.name/*item.content && item.content.style && item.content.style.titleValue*/ ) || '标题'}
									</div>
									<div className={styles.chartsbase_container}>
										<ChartsBase config={item.content.style}>
											<div style={ {
												backgroundColor: item.content.style.chartBackgroundColor || '#fff',
												height: '100%'
											} }>
												{ChartsTypeMap( item.content.type, {
													config: item.content,
													key: item.content.key,
													id: item.content.key,
													chartLayout: { w: 0, h: 0 }		//	图形组件默认属性
												} )}
											</div>
										</ChartsBase>
									</div>
								</div>
								<div className={styles.chart_item_btns}>
									{
										btnAuth.includes( 'bi_graphLib_toDashboard' ) && (
											<div className={styles.chart_item_btn}>
												<BdhButton
													style={{ width: 140 }}
													label="添加至仪表板"
													align='horizontal'
													className="primary-transpanent"
													icon={ <CheckOutlined />}
													onClick={() => this.handleAddClick( item )}
												></BdhButton>
											</div>
										)
									}
									{
										btnAuth.includes( 'bi_graphLib_detail' ) && (
											<div className={styles.chart_item_btn}>
												<BdhButton
													style={{ width: 140 }}
													label="查看详细信息"
													className="primary-transpanent"
													onClick={() => this.handleViewClick( item )}
												></BdhButton>
											</div>
										)
									}
									{
										btnAuth.includes( 'bi_graphLib_del' ) && (
											<div className={styles.chart_item_btn}>
												<Tooltip placement="topRight" title="">
													<Popconfirm
														okText="确定"
														cancelText="取消"
														title="确定删除这一项？"
														placement="bottom"
														onConfirm={() => this.handleDeleteClick( item )}
													>
														<BdhButton
															style={{ width: 140 }}
															label="删除"
															className="grey-transpanent"
															onClick={null}
														></BdhButton>
													</Popconfirm>
												</Tooltip>
											</div>
										)
									}
								</div>
							</div>
						);
					} )}
					
				{/* 详细信息 */}
				<DetailModal
					currentConfig={this.state.currentConfig.content}
					modalVisible={this.state.detailModalVisable}
					cancelHandle={this.toggleDetailModalVisable}
					okHandle={this.toggleDetailModalVisable}
				></DetailModal>
			</>
		);
	}
}

//	映射state到当前组件
const mapStateToProps = ( state ) => {
	return {
		btnAuth: state.btnAuth,
	};
};

export default connect( mapStateToProps )( Charts );
